<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
  <div id="app" class="root">
    <!-- 
      具名插槽的用法
    -->
    <base-layout>
      <p slot="header">标题信息</p>
      <!-- 会把未匹配到的放到默认插槽中 -->
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot="footer">底部信息</p>
    </base-layout>

    <!-- 
      如果把插槽中放入slot的话,只能放一个标签
      如果使用template的话,那么就可以放入多个标签,而且template不会渲染到页面上
     -->
    <base-layout>
      <template slot="header">
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot="footer">
        <p >底部信息1</p>
        <p >底部信息2</p>
      </template>
      
    </base-layout>
  </div>


  <script type="text/javascript">
    Vue.component('base-layout', {
      template: `
      <div>
        <header>
          <slot name="header"></slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
          `
    })
    var vm = new Vue({
      el: '#app',
    });
  </script>
</body>

</html>